<template>
	<view class="uni_box home">
		<navbar title='问题详情' :yin="true">
		</navbar>
		<view class="content">
			<view class="oneview">
				<text class="onetit">来自：{{ info.cate_name }} > {{ info.level_name }}</text>
				<text class="twotit">{{info.title}}</text>
				<view class="touview">
					<image class="tous" :src="info.avatar" mode="" />
					<text class="shouji">{{ info.mobile }}</text>
					<text class="time">{{info.createtime}}</text>
				</view>
				<view class="threetit">
					<u-parse :html="info.content"></u-parse>
					<view class="newtulist">
						<image class="tuitem" v-for="(j,jd) in info.images" :src="j" mode="" @click="tuClick(j,info.images)" />
					</view>
				</view>

				<view class="shouview">
					<view class="shouitem" :class="info.is_collection==1?'sactive':''" @click="getzan(1)">
						<image class="sctwo" src="@/pages_subject/static/img/sc.png" mode="" />
						<image class="sc" src="@/pages_subject/static/img/csxing.png" mode="" />
						<text class="sctit">收藏</text>
					</view>
					<view class="shouitem " :class="info.is_zan==1?'sactive':''" @click="getzan(2)">
						<image class="sczan" src="@/pages_subject/static/img/dz.png" mode="" />
						<image class="sczantwo" src="@/pages_subject/static/img/zans.png" mode="" />
						<text class="sctit">点赞</text>
					</view>
				</view>
			</view>

			<view class="yin"></view>

			<view class="huiview" v-if="replyinfo.list">
				<text class="huitit">全部回复（{{replyinfo.count}}）</text>
				<view class="huilist">
					<view class="huiitem" v-for="(item,index) in replyinfo.list" :key="index">
						<view class="huione">
							<image class="tous" :src="item.teacher_image" mode="" />
							<text class="yname">{{item.teacher_name}}</text>
						</view>
						<view class="nei">
							<text class="neione">
								{{item.content}}
							</text>
							<view class="zhui">
								<text class="ztime">{{item.createtime}}</text>
								<text class="zhuiwen" @click="getzhuiwen(item.id)">追问</text>
							</view>

							<view class="zhuilist" v-if="item.list">
								<view class="zhuiitem" v-for="(i,ind) in item.list" :key="ind">
									<text class="zhuileft">{{ i.type_text }}</text>
									<view class="zhuiright">
										<text class="zhuitit">{{i.content}}</text>
										<text class="zhuitime">{{i.createtime}}</text>
										<view class="tulist">
											<image class="tuitem" v-for="(j,jd) in i.images" :src="j" mode="" @click="tuClick(j,i.images)" />
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{},
				replyinfo:{
					count:0,
					list:[]
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			
		},
		onShow() {
			this.getDetail()
			this.getQuestionReply()
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getQustionInfo({
					id:this.id
				});
				this.info = res

			},
			async getQuestionReply(){
				let res = await this.$u.api.getQuestionReply({
					id:this.id
				});
				this.replyinfo = res

			},
			async getzan(e){
				if(e == 1){
					//点击收藏
					
					let res = await this.$u.api.dayiaddCollection({
						id:this.id
					});
					this.$u.toast("操作成功");
					this.info.is_collection = this.info.is_collection==1?'0':'1'
				}else if(e == 2){
					//点击点赞
					let res = await this.$u.api.addZan({
						id:this.id
					});
					this.$u.toast("操作成功");
					this.info.is_zan = this.info.is_zan==1?'0':'1'
				}
			},
			tuClick(i,item){
				uni.previewImage({
					current: i, //预览图片的下标
					urls: item //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getzhuiwen(id){
				this.navrouter("/pages_subject/twoPage/MinePage/WenZhui?id="+id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 100rpx;
		// padding-bottom: 150rpx;
		.oneview{
			padding: 30rpx;
		}
		.onetit{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: block;
			margin-bottom: 40rpx;
		}
		.twotit{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
		}
		.touview{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			flex-direction: row;
			align-items: center;
			.tous{
				width: 56rpx;
				height: 56rpx;
				margin-right: 20rpx;
			}
			.shouji{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
			.time{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				margin-left: auto;
			}
		}
		.threetit{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #555555;
			display: block;
			margin: 35rpx 0;

		}
		.shouview{
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin: 60rpx 0 40rpx;
			.shouitem{
				padding: 15rpx 30rpx;
				background: #F8F8F8;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 20rpx;
				.sc{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
				.sctwo{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
					display: none;
				}
				.sctit{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
				.sczan{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
				.sczantwo{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
					display: none;
				}
			}
			.sactive{
				background: #FFF0D4;
				.sctit{
					color: #FFA801;
				}
				.sctwo{
					display: inline-block;

				}
				.sc{
					display: none;
				}
				.sczantwo{
					display: inline-block;
				}
				.sczan{
					display: none;
				}
			}
		}
		.yin{
			position: relative;
			height: 30rpx;
			background: #F6F7FB;
		}

		.huiview{
			padding: 40rpx 30rpx;
			.huitit{
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 24rpx;
				color: #111111;
				display: block;
				margin-bottom: 40rpx;
			}
			.huilist{
				.huiitem{
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #eee;
					.huione{
						display: flex;
						flex-direction: row;
						align-items: center;
						.tous{
							margin-right: 22rpx;
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;

						}
						.yname{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.nei{
						
						padding-left: 68rpx;
						display: flex;
						flex-direction: column;
						.neione{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #111111;
							display: block;
							margin: 20rpx 0;
						}
						.zhui{
							display: flex;
							flex-direction: row;
							align-items: center;
							.ztime{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;
							}
							.zhuiwen{
								margin-left: auto;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #325082;
							}
						}
						.zhuilist{
							margin-top: 22rpx;
							background: #F8F8F8;
							border-radius: 4rpx;
							padding: 10rpx 20rpx;
							.zhuiitem{
								display: flex;
								flex-direction: row;
								padding: 20rpx 0;
								// padding-bottom: 30rpx;
								border-bottom: 1rpx solid #EEEEEE;
								.zhuileft{
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #999999;
								}
								.zhuiright{
									flex: 1;
									display: flex;
									flex-direction: column;
									margin-left: 20rpx;
									.zhuitit{
										font-family: PingFang SC;
										font-weight: 500;
										font-size: 22rpx;
										color: #111111;
									}
									.zhuitime{
										display: inline-block;
										font-family: PingFang SC;
										font-weight: 400;
										font-size: 22rpx;
										color: #999999;
										margin-top: 15rpx;
									}
								}
								.tulist{
									display: flex;
									flex-direction: row;
									flex-wrap: wrap;
									margin-top: 20rpx;
									.tuitem{
										width: 160rpx;
										height: 160rpx;
										border-radius: 5rpx;
										margin: 0 20rpx 20rpx 0;

									}
								}
							}
							.zhuiitem:last-child{
								border-bottom: none;
								margin-bottom: 0;
							}
						}
					}
				}
			}

		}

	}
	.newtulist{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 40rpx;
		.tuitem{
			width: 160rpx;
			height: 160rpx;
			border-radius: 5rpx;
			margin: 0 20rpx 20rpx 0;

		}
	}
</style>
